React useReducer: Keeruka olekuhalduse ja tegevuste edastamise valdamine

Front-end arenduse valdkonnas on rakenduse oleku tõhus haldamine esmatähtis. React, populaarne JavaScripti teek kasutajaliideste loomiseks, pakub oleku käsitlemiseks erinevaid tööriistu. Nende hulgas pakub useReducer hook võimsat ja paindlikku lähenemist keeruka olekuloogika haldamiseks. See põhjalik juhend süveneb useReducer'i peensustesse, varustades teid teadmiste ja praktiliste näidetega, et luua robustseid ja skaleeritavaid Reacti rakendusi globaalsele publikule.

Põhitõdede mõistmine: olek, tegevused ja redutseerijad

Enne kui süveneme rakendamise detailidesse, loome tugeva aluse. Põhikontseptsioon keerleb kolme peamise komponendi ümber:

• Olek (State): Esindab andmeid, mida teie rakendus kasutab. See on teie rakenduse andmete hetkeseis mis tahes ajahetkel. Olek võib olla lihtne (nt tõeväärtus) või keeruline (nt objektide massiiv).
• Tegevused (Actions): Kirjeldavad, mis peaks olekuga juhtuma. Mõelge tegevustest kui juhistest või sündmustest, mis käivitavad oleku üleminekuid. Tegevusi esitatakse tavaliselt JavaScripti objektidena, millel on type omadus, mis näitab sooritatavat tegevust, ja valikuliselt payload, mis sisaldab oleku uuendamiseks vajalikke andmeid.
• Redutseerija (Reducer): Puhas funktsioon, mis võtab sisendiks praeguse oleku ja tegevuse ning tagastab uue oleku. Redutseerija on olekuhalduse loogika tuum. See määrab, kuidas olek peaks muutuma vastavalt tegevuse tüübile.

Need kolm komponenti töötavad koos, et luua ennustatav ja hooldatav olekuhaldussüsteem. useReducer hook lihtsustab seda protsessi teie Reacti komponentides.

useReducer hook'i anatoomia

useReducer hook on sisseehitatud Reacti hook, mis võimaldab teil hallata olekut redutseerija funktsiooniga. See on võimas alternatiiv useState hook'ile, eriti keeruka olekuloogikaga tegelemisel või kui soovite oma olekuhaldust tsentraliseerida.

Siin on põhisüntaks:

            const [state, dispatch] = useReducer(reducer, initialState, init?);
            

              
                Copy
              
            
          

Vaatame iga parameetri üle:

• reducer: Puhas funktsioon, mis võtab praeguse oleku ja tegevuse ning tagastab uue oleku. See funktsioon kapseldab teie oleku uuendamise loogika.
• initialState: Oleku algväärtus. See võib olla mis tahes JavaScripti andmetüüp (nt number, string, objekt või massiiv).
• init (valikuline): Initsialiseerimisfunktsioon, mis võimaldab tuletada algoleku keerulisest arvutusest. See on kasulik jõudluse optimeerimiseks, kuna initsialiseerimisfunktsioon käivitatakse ainult üks kord esmasel renderdamisel.
• state: Praegune oleku väärtus. See on see, mida teie komponent renderdab.
• dispatch: Funktsioon, mis võimaldab teil edastada tegevusi redutseerijale. dispatch(action) kutsumine käivitab redutseerija funktsiooni, edastades argumendina praeguse oleku ja tegevuse.

Lihtne loenduri näide

Alustame klassikalisest näitest: loendur. See demonstreerib useReducer'i põhikontseptsioone.

            
import React, { useReducer } from 'react';

// Määratle algolek
const initialState = { count: 0 };

// Määratle redutseerija funktsioon
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error(); // Või tagasta olek
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Selles näites:

• Me määratleme initialState objekti.
• reducer funktsioon käsitleb oleku uuendusi vastavalt action.type'ile.
• dispatch funktsiooni kutsutakse nupu onClick käsitlejates, saates tegevusi sobiva type'iga.

Laiendamine keerukamale olekule

useReducer'i tegelik jõud tuleb esile keerukate olekustruktuuride ja peene loogikaga tegelemisel. Vaatleme stsenaariumi, kus haldame elementide nimekirja (nt ülesannete nimekiri, tooted e-poes või isegi seaded). See näide demonstreerib võimet käsitleda erinevaid tegevustüüpe ja uuendada mitme omadusega olekut:

            
import React, { useReducer } from 'react';

// Algolek
const initialState = { items: [], newItem: '' };

// Redutseerija funktsioon
function reducer(state, action) {
  switch (action.type) {
    case 'addItem':
      return {
        ...state,
        items: [...state.items, { id: Date.now(), text: state.newItem, completed: false }],
        newItem: ''
      };
    case 'updateNewItem':
      return {
        ...state,
        newItem: action.payload
      };
    case 'toggleComplete':
      return {
        ...state,
        items: state.items.map(item =>
          item.id === action.payload ? { ...item, completed: !item.completed } : item
        )
      };
    case 'deleteItem':
      return {
        ...state,
        items: state.items.filter(item => item.id !== action.payload)
      };
    default:
      return state;
  }
}

function ItemList() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h2>Item List</h2>
      <input
        type="text"
        value={state.newItem}
        onChange={e => dispatch({ type: 'updateNewItem', payload: e.target.value })}
      />
      <button onClick={() => dispatch({ type: 'addItem' })}>Add Item</button>
      <ul>
        {state.items.map(item => (
          <li key={item.id}
            style={{ textDecoration: item.completed ? 'line-through' : 'none' }}
          >
            {item.text}
            <button onClick={() => dispatch({ type: 'toggleComplete', payload: item.id })}>
              Toggle Complete
            </button>
            <button onClick={() => dispatch({ type: 'deleteItem', payload: item.id })}>
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ItemList;

            

              
                Copy
              
            
          

Selles keerukamas näites:

• initialState sisaldab elementide massiivi ja välja uue elemendi sisestamiseks.
• reducer käsitleb mitut tegevustüüpi (addItem, updateNewItem, toggleComplete ja deleteItem), millest igaüks vastutab konkreetse oleku uuendamise eest. Märkige laotusoperaatori (...state) kasutamist olemasolevate olekuandmete säilitamiseks, kui uuendate ainult väikest osa olekust. See on levinud ja tõhus muster.
• Komponent renderdab elementide nimekirja ja pakub juhtelemente elementide lisamiseks, lõpetatuks märkimiseks ja kustutamiseks.

Parimad tavad ja kaalutlused

Et kasutada useReducer'i täit potentsiaali ning tagada koodi hooldatavus ja jõudlus, kaaluge neid parimaid tavasid:

• Hoidke redutseerijad puhtana: Redutseerijad peavad olema puhtad funktsioonid. See tähendab, et neil ei tohi olla kõrvalmõjusid (nt võrgupäringud, DOM-i manipuleerimine või argumentide muutmine). Nad peaksid arvutama uue oleku ainult praeguse oleku ja tegevuse põhjal.
• Eraldage vastutusalad: Keerukate rakenduste puhul on sageli kasulik eraldada redutseerija loogika erinevatesse failidesse või moodulitesse. See võib parandada koodi organiseeritust ja loetavust. Võite luua eraldi failid redutseerija, tegevuste loojate ja algoleku jaoks.
• Kasutage tegevuste loojaid (Action Creators): Tegevuste loojad on funktsioonid, mis tagastavad tegevusobjekte. Need aitavad parandada koodi loetavust ja hooldatavust, kapseldades tegevusobjektide loomise. See soodustab järjepidevust ja vähendab trükivigade tõenäosust.
• Muutumatud uuendused: Käsitlege oma olekut alati muutumatuna. See tähendab, et te ei tohiks kunagi olekut otse muuta. Selle asemel looge olekust koopia (nt kasutades laotusoperaatorit või Object.assign()) ja muutke koopiat. See hoiab ära ootamatud kõrvalmõjud ja muudab teie rakenduse silumise lihtsamaks.
• Kaaluge init funktsiooni: Kasutage init funktsiooni keerukate algoleku arvutuste jaoks. See parandab jõudlust, arvutades algoleku ainult üks kord komponendi esmasel renderdamisel.
• Vigade käsitlemine: Rakendage oma redutseerijas tugevat vigade käsitlemist. Käsitlege ootamatuid tegevustüüpe ja võimalikke vigu sujuvalt. See võib hõlmata olemasoleva oleku tagastamist (nagu näidatud elementide nimekirja näites) või vigade logimist silumiskonsooli.
• Jõudluse optimeerimine: Väga suurte või sageli uuendatavate olekute puhul kaaluge memoreerimistehnikate (nt useMemo) kasutamist jõudluse optimeerimiseks. Samuti veenduge, et teie komponendid renderdaksid uuesti ainult siis, kui see on vajalik.

Tegevuste loojad: koodi loetavuse parandamine

Tegevuste loojad on funktsioonid, mis kapseldavad tegevusobjektide loomise. Need muudavad teie koodi puhtamaks ja vähem vigadele altiks, tsentraliseerides tegevuste loomise.

            
// Tegevuste loojad ItemList näite jaoks

const addItem = () => ({
  type: 'addItem'
});

const updateNewItem = (text) => ({
  type: 'updateNewItem',
  payload: text
});

const toggleComplete = (id) => ({
  type: 'toggleComplete',
  payload: id
});

const deleteItem = (id) => ({
  type: 'deleteItem',
  payload: id
});

            

              
                Copy
              
            
          

Seejärel edastaksite need tegevused oma komponendis:

            
dispatch(addItem());
dispatch(updateNewItem(e.target.value));
dispatch(toggleComplete(item.id));
dispatch(deleteItem(item.id));

            

              
                Copy
              
            
          

Tegevuste loojate kasutamine parandab koodi loetavust, hooldatavust ja vähendab tegevustüüpides esinevate trükivigade tõenäosust.

useReducer'i integreerimine Context API-ga

Globaalse oleku haldamiseks kogu rakenduses on useReducer'i kombineerimine Reacti Context API-ga võimas muster. See lähenemine pakub tsentraliseeritud olekuhoidlat, millele pääseb juurde mis tahes komponent teie rakenduses.

Siin on põhiline näide, mis demonstreerib, kuidas kasutada useReducer'it koos Context API-ga:

            
import React, { createContext, useContext, useReducer } from 'react';

// Loo kontekst
const AppContext = createContext();

// Määratle algolek ja redutseerija (nagu eelnevalt näidatud)
const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// Loo pakkuja komponent
function AppProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);

  const value = { state, dispatch };

  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
}

// Loo kohandatud hook kontekstile juurdepääsuks
function useAppContext() {
  return useContext(AppContext);
}

// Näidiskomponent, mis kasutab konteksti
function Counter() {
  const { state, dispatch } = useAppContext();

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

// Mähi oma rakendus pakkuja sisse
function App() {
  return (
    <AppProvider>
      <Counter />
    </AppProvider>
  );
}

export default App;

            

              
                Copy
              
            
          

Selles näites:

• Me loome konteksti, kasutades createContext().
• AppProvider komponent pakub oleku ja dispatch-funktsiooni kõigile alamkomponentidele, kasutades AppContext.Provider'it.
• useAppContext hook muudab alamkomponentide jaoks konteksti väärtustele juurdepääsu lihtsamaks.
• Counter komponent tarbib konteksti ja kasutab dispatch funktsiooni globaalse oleku uuendamiseks.

See muster on eriti kasulik kogu rakendust hõlmava oleku haldamiseks, nagu kasutaja autentimine, teema eelistused või muud globaalsed andmed, millele peavad juurde pääsema mitmed komponendid. Mõelge kontekstist ja redutseerijast kui oma tsentraalsest rakenduse olekuhoidlast, mis võimaldab teil hoida olekuhalduse eraldi üksikutest komponentidest.

Jõudlusega seotud kaalutlused ja optimeerimistehnikad

Kuigi useReducer on võimas, on oluline olla teadlik jõudlusest, eriti suuremahulistes rakendustes. Siin on mõned strateegiad oma useReducer'i rakenduse jõudluse optimeerimiseks:

• Memoreerimine (useMemo ja useCallback): Kasutage useMemo't kulukate arvutuste memoreerimiseks ja useCallback'i funktsioonide memoreerimiseks. See hoiab ära tarbetud uuesti renderdamised. Näiteks, kui redutseerija funktsioon on arvutuslikult kulukas, kaaluge useCallback'i kasutamist, et vältida selle uuesti loomist iga renderdamise korral.
• Vältige tarbetuid uuesti renderdamisi: Veenduge, et teie komponendid renderdaksid uuesti ainult siis, kui nende propsid või olek muutuvad. Kasutage React.memo või kohandatud shouldComponentUpdate rakendusi komponentide uuesti renderdamise optimeerimiseks.
• Koodi tükeldamine (Code Splitting): Suurte rakenduste puhul kaaluge koodi tükeldamist, et laadida ainult iga vaate või jaotise jaoks vajalik kood. See võib oluliselt parandada esialgseid laadimisaegu.
• Optimeerige redutseerija loogikat: Redutseerija funktsioon on jõudluse seisukohalt ülioluline. Vältige tarbetute arvutuste või toimingute tegemist redutseerijas. Hoidke redutseerija puhtana ja keskenduge oleku tõhusale uuendamisele.
• Profileerimine: Kasutage Reacti arendaja tööriistu (või sarnaseid) oma rakenduse profileerimiseks ja jõudluse kitsaskohtade tuvastamiseks. Analüüsige erinevate komponentide renderdamisaegu ja tuvastage optimeerimist vajavad alad.
• Pakettuuendused (Batch Updates): React pakendab uuendused automaatselt, kui võimalik. See tähendab, et mitu olekuuuendust ühe sündmusekäsitleja sees grupeeritakse üheks uuesti renderdamiseks. See optimeerimine parandab üldist jõudlust.

Kasutusjuhud ja reaalse maailma näited

useReducer on mitmekülgne tööriist, mida saab rakendada paljudes erinevates stsenaariumides. Siin on mõned reaalse maailma kasutusjuhud ja näited:

• E-kaubanduse rakendused: Toodete laoseisu, ostukorvide, kasutajate tellimuste ja toodete filtreerimise/sorteerimise haldamine. Kujutage ette globaalset e-kaubanduse platvormi. useReducer koos Context API-ga suudab hallata ostukorvi olekut, võimaldades eri riikidest pärit klientidel lisada tooteid oma ostukorvi, näha oma asukohapõhiseid saatmiskulusid ja jälgida tellimuse protsessi. See nõuab tsentraliseeritud hoidlat ostukorvi oleku uuendamiseks erinevates komponentides.
• Ülesannete nimekirja rakendused: Ülesannete loomine, uuendamine ja haldamine. Meie käsitletud näited pakuvad tugeva aluse ülesannete nimekirjade loomiseks. Kaaluge funktsioonide lisamist nagu filtreerimine, sorteerimine ja korduvad ülesanded.
• Vormihaldus: Kasutaja sisendi, vormi valideerimise ja esitamise käsitlemine. Saate hallata vormi olekut (väärtused, valideerimisvead) redutseerijas. Näiteks on erinevates riikides erinevad aadressivormingud ja redutseerija abil saate aadressivälju valideerida.
• Autentimine ja autoriseerimine: Kasutaja sisselogimise, väljalogimise ja juurdepääsukontrolli haldamine rakenduses. Salvestage autentimismärgid ja kasutajarollid. Kujutage ette globaalset ettevõtet, mis pakub rakendusi sisemistele kasutajatele paljudes riikides. Autentimisprotsessi saab tõhusalt hallata useReducer hook'i abil.
• Mängude arendus: Mängu oleku, mängijate skooride ja mänguloogika haldamine.
• Keerukad UI komponendid: Keerukate UI komponentide oleku haldamine, nagu modaalsed dialoogid, akordionid või vahekaartidega liidesed.
• Globaalsed seaded ja eelistused: Kasutaja eelistuste ja rakenduse seadete haldamine. See võib hõlmata teema eelistusi (hele/tume režiim), keeleseadeid ja kuvamisvalikuid. Hea näide oleks keeleseadete haldamine mitmekeelsetele kasutajatele rahvusvahelises rakenduses.

Need on vaid mõned näited. Oluline on tuvastada olukorrad, kus peate haldama keerukat olekut või kus soovite tsentraliseerida olekuhalduse loogikat.

useReducer'i eelised ja puudused

Nagu igal tööriistal, on ka useReducer'il oma tugevused ja nõrkused.

Eelised:

• Ennustatav olekuhaldus: Redutseerijad on puhtad funktsioonid, mis muudab oleku muudatused ennustatavaks ja lihtsamini silutavaks.
• Tsentraliseeritud loogika: Redutseerija funktsioon tsentraliseerib oleku uuendamise loogika, mis viib puhtama koodi ja parema organiseerituseni.
• Skaleeritavus: useReducer sobib hästi keeruka oleku ja suurte rakenduste haldamiseks. See skaleerub hästi, kui teie rakendus kasvab.
• Testitavus: Redutseerijaid on lihtne testida, kuna need on puhtad funktsioonid. Saate kirjutada ühikteste, et kontrollida, kas teie redutseerija loogika töötab korrektselt.
• Alternatiiv Reduxile: Paljude rakenduste jaoks pakub useReducer kergekaalulist alternatiivi Reduxile, vähendades vajadust väliste teekide ja korduvkoodi järele.

Puudused:

• Järsem õppimiskõver: Redutseerijate ja tegevuste mõistmine võib olla veidi keerulisem kui useState'i kasutamine, eriti algajatele.
• Korduvkood (Boilerplate): Mõnel juhul võib useReducer nõuda rohkem koodi kui useState, eriti lihtsate olekuuuenduste puhul.
• Võimalik liialdus: Väga lihtsa olekuhalduse jaoks võib useState olla otsekohesem ja lühem lahendus.
• Nõuab rohkem distsipliini: Kuna see tugineb muutumatutele uuendustele, nõuab see distsiplineeritud lähenemist oleku muutmisele.

Alternatiivid useReducer'ile

Kuigi useReducer on võimas valik, võite kaaluda alternatiive sõltuvalt teie rakenduse keerukusest ja konkreetsete funktsioonide vajadusest:

• useState: Sobib lihtsate olekuhalduse stsenaariumide jaoks, kus keerukus on minimaalne.
• Redux: Populaarne olekuhaldusteek keerukatele rakendustele, millel on täiustatud funktsioonid nagu vahevara, ajas rändamise silumine ja globaalne olekuhaldus.
• Context API (ilma useReducer'ita): Saab kasutada oleku jagamiseks kogu rakenduses. Seda kombineeritakse sageli useReducer'iga.
• Teised olekuhaldusteegid (nt Zustand, Jotai, Recoil): Need teegid pakuvad erinevaid lähenemisi olekuhaldusele, keskendudes sageli lihtsusele ja jõudlusele.

Selle, millist tööriista kasutada, valik sõltub teie projekti spetsiifikast. Hinnake oma rakenduse nõudeid ja valige lähenemine, mis sobib teie vajadustele kõige paremini.

Kokkuvõte: olekuhalduse valdamine useReducer'iga

useReducer hook on väärtuslik tööriist oleku haldamiseks Reacti rakendustes, eriti neis, millel on keerukas olekuloogika. Mõistes selle põhimõtteid, parimaid tavasid ja kasutusjuhte, saate luua robustseid, skaleeritavaid ja hooldatavaid rakendusi. Pidage meeles:

• Järgige muutumatuse põhimõtet.
• Hoidke redutseerijad puhtana.
• Eraldage vastutusalad hooldatavuse huvides.
• Kasutage tegevuste loojaid koodi selguse jaoks.
• Kaaluge konteksti kasutamist globaalseks olekuhalduseks.
• Optimeerige jõudlust, eriti keerukate rakenduste puhul.

Kogemuste kasvades avastate, et useReducer annab teile võimekuse tegeleda keerukamate projektidega ja kirjutada puhtamat, ennustatavamat Reacti koodi. See võimaldab teil luua professionaalseid Reacti rakendusi, mis on valmis globaalsele publikule.

Võime olekut tõhusalt hallata on kaasahaaravate ja funktsionaalsete kasutajaliideste loomisel hädavajalik. useReducer'i valdamisega saate oma Reacti arendusoskusi tõsta ja luua rakendusi, mis suudavad skaleeruda ja kohaneda globaalse kasutajaskonna vajadustega.